/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Container styles */
.table-explorer-grid-container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Grid base styles */
#tableExplorerGrid {
    --slick-border-color: var(--vscode-editorWidget-border);
    --slick-cell-border-right: 1px solid var(--vscode-editorWidget-border);
    --slick-cell-border-top: 1px solid var(--vscode-editorWidget-border);
    --slick-cell-border-bottom: 0;
    --slick-cell-border-left: 0;
    --slick-cell-box-shadow: none;
    --slick-grid-border-color: var(--vscode-editorWidget-border);
    --slick-header-column-height: 26px;
    flex: 1;
    min-height: 0;
}

#tableExplorerGrid .slick-viewport {
    overflow-x: auto !important; /* Enable horizontal scrolling */
}

#tableExplorerGrid .slick-cell {
    display: flex;
    align-items: center;
    line-height: 1.2; /* Tighter line height for more compact rows */
    padding: 2px 4px; /* Reduced padding for more compact cells */
}

#tableExplorerGrid .slick-row {
    height: 26px; /* Explicit row height to match the rowHeight option */
}

/* Force theme colors on SlickGrid elements */
#tableExplorerGrid .slick-header,
#tableExplorerGrid .slick-headerrow,
#tableExplorerGrid .slick-footerrow,
#tableExplorerGrid .slick-top-panel {
    background-color: var(--vscode-editor-background) !important;
    color: var(--vscode-foreground) !important;
    border-bottom: 1px solid var(--vscode-panel-border) !important;
    height: 26px !important; /* Match data row height for uniform appearance */
}

#tableExplorerGrid .slick-header-column {
    background-color: var(--vscode-editor-background) !important;
    color: var(--vscode-foreground) !important;
    border-right: 1px solid var(--vscode-panel-border) !important;
    border-bottom: 1px solid var(--vscode-panel-border) !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 4px 8px !important; /* Adjusted padding for 26px height */
    line-height: 1.2 !important;
    height: 26px !important; /* Explicit height to match data rows */
    box-sizing: border-box !important; /* Ensure padding is included in height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important; /* Hide overflow */
    text-overflow: ellipsis !important; /* Show ellipsis for long text */
    white-space: nowrap !important; /* Prevent text wrapping */
}

#tableExplorerGrid .slick-header-column:last-child {
    border-right: none !important;
}

#tableExplorerGrid .slick-header-column .slick-column-name {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    margin: 0 !important; /* Remove excessive margin that pushes text out of view */
    overflow: hidden !important; /* Hide overflow */
    text-overflow: ellipsis !important; /* Show ellipsis for long text */
    white-space: nowrap !important; /* Prevent text wrapping */
}

#tableExplorerGrid .slick-cell,
#tableExplorerGrid .slick-row {
    background-color: var(--vscode-editor-background) !important;
    color: var(--vscode-foreground) !important;
}

#tableExplorerGrid .slick-row.odd {
    background-color: var(--vscode-editor-background) !important;
}

#tableExplorerGrid .slick-row.even {
    background-color: var(--vscode-editor-background) !important;
}

#tableExplorerGrid .slick-row:hover {
    background-color: var(--vscode-list-hoverBackground) !important;
}

#tableExplorerGrid .slick-row.selected {
    background-color: var(--vscode-list-activeSelectionBackground) !important;
    color: var(--vscode-list-activeSelectionForeground) !important;
}

/* Fix viewport canvas background */
#tableExplorerGrid
    > div.slick-pane.slick-pane-top.slick-pane-left
    > div.slick-viewport.slick-viewport-top.slick-viewport-left
    > div {
    background-color: var(--vscode-editor-background) !important;
}

/* VS Code-style context menu */
.slick-context-menu {
    background-color: var(--vscode-menu-background) !important;
    border: 1px solid var(--vscode-menu-border) !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 8px var(--vscode-widget-shadow) !important;
    padding: 4px 0 !important;
    min-width: 180px !important;
}

.slick-context-menu .slick-menu-item {
    background-color: transparent !important;
    color: var(--vscode-menu-foreground) !important;
    padding: 4px 20px 4px 30px !important;
    line-height: 22px !important;
    font-size: 13px !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.slick-context-menu .slick-menu-item:hover {
    background-color: var(--vscode-menu-selectionBackground) !important;
    color: var(--vscode-menu-selectionForeground) !important;
}

.slick-context-menu .slick-menu-item .slick-menu-icon {
    position: absolute !important;
    left: 8px !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.slick-context-menu .slick-menu-item .slick-menu-content {
    flex: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.slick-context-menu .slick-menu-item.red {
    color: var(--vscode-menu-foreground) !important;
}

.slick-context-menu .slick-menu-item.red:hover {
    color: var(--vscode-menu-selectionForeground) !important;
}

.slick-context-menu .slick-menu-item .mdi {
    color: var(--vscode-menu-foreground) !important;
    font-size: 16px !important;
}

.slick-context-menu .slick-menu-item:hover .mdi {
    color: var(--vscode-menu-selectionForeground) !important;
}

.slick-context-menu .slick-menu-item.bold,
.slick-context-menu .slick-menu-item .bold {
    font-weight: normal !important;
}

/* Cell state styles */
.table-cell-error {
    background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);
    padding: 1px 4px; /* Reduced top/bottom padding for compact rows */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.2;
}

.table-cell-modified {
    background-color: var(--vscode-inputValidation-warningBackground, #fffbe6);
    padding: 1px 4px; /* Reduced top/bottom padding for compact rows */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.2;
}

.table-cell-null {
    font-style: italic;
    color: var(--vscode-editorGhostText-foreground, #888);
}

/* Row number column */
.table-row-number {
    color: var(--vscode-foreground);
    padding-left: 8px;
}

/* Deleted row styles - uses VS Code theme variables for automatic light/dark theme support */
#tableExplorerGrid .slick-row.deleted-row {
    background-color: var(--vscode-diffEditor-removedLineBackground) !important;
}

#tableExplorerGrid .slick-row.deleted-row:hover {
    background-color: var(--vscode-diffEditor-removedTextBackground) !important;
}

#tableExplorerGrid .slick-row.deleted-row.selected {
    background-color: var(--vscode-diffEditor-removedTextBackground) !important;
}

#tableExplorerGrid .slick-row.deleted-row .slick-cell {
    text-decoration: line-through;
    color: var(--vscode-disabledForeground) !important;
    opacity: 0.7;
}
